<template>
    <div class="table-popover">
        <el-tooltip effect="light" placement="right" popper-class="popper-tips">
            <span class="table_content">{{ `${props.content.length}个${props.name}` }}</span>
            <template #content>
                <el-scrollbar max-height="145px">
                    <div class="table-popover-content">
                        <div v-for="(item, index) in props.content" :key="index" class="table-popover-item">
                            {{ item }}
                        </div>
                    </div>
                </el-scrollbar>
            </template>
        </el-tooltip>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, onMounted } from 'vue';

interface Props {
    modelValue: string;
    name: string;
    content: string[];
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    name: '',
    content: () => []
});

const emit = defineEmits(['update:modelValue']);
</script>
<style scoped lang="scss">
.popper-tips {
    .table-popover-content {
        background-color: #fff;
        box-shadow: 0 0 40px #ddd;
        max-height: 320px;
        .table-popover-item {
            margin: 0 10px;
            height: 40px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ddd;
            &:last-of-type {
                border: none;
            }
        }
    }
}
.table_content {
    margin-right: 4px;
    cursor: pointer;
    color: #ff6b00;
}
</style>
